<template>
  <header id="header">
    <!-- header采用teleport组件进行穿梭布局
      <teleport to="#header"></teleport>
      <van-nav-bar title="标题" :fixed="true" safe-area-inset-top /> -->
  </header>
  <footer v-if="$route.meta.useToolbar" id="footer">
    <an-toolbar />
  </footer>
  <section id="container">
    <router-view v-slot="{ Component }">
      <transition>
        <component :is="Component" />
      </transition>
    </router-view>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'App',
})
</script>

<style lang="less">
#header {
  position: relative;
  z-index: 99999;

  & ~ #container {
    padding-top: 1.22667rem;
  }
}
#footer {
  position: relative;
  z-index: 99999;

  & ~ #container {
    padding-bottom: 1.33333rem;
  }
}
#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
  z-index: 1;
  // background-color: #f7f8fa;
}
// 针对 tabs 的样式
#container {
  .van-tabs__wrap {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1;
  }
  .van-tabs__content {
    padding-top: 1.17333rem;
  }
}
</style>
